<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <script src="../js/axios.min.js"></script>
    <script>
        function upload(){
            // 获取文件输入框对象
            let input = document.querySelector("input[name='head']");
            // 获取选择的第一个文件
            let file = input.files[0];
            let url = "upload.s";
            // 构建文件上传对象 js原生对象
            let data = new FormData();
            // 添加文件
            data.append("headfile", file);
            // 发送请求  then : 当接收到服务器正常响应时, 执行的回调函数,
            // res 服务器返回的结果对象,  res.status 结果码, res.data 是响应的数据
            axios.post( url, data).then( res=>{
                // axios 会自动判断 res.data的类型, 如果是 json 对象, 那么自动转换成 js 对象
                console.info(res.data.code)
                console.info(res.data.msg)
                console.info(res.data.data)
                let img = document.querySelector("div img");
                // 显示图片
                img.src = "../"+res.data.data
            });
        }
    </script>

</head>
<body>
<fieldset>
    <legend>用户注册</legend>
    <form>
        <div>
            <label>账号</label><input type="text" name="account" placeholder="请输入账号"><span id="accountMsg"></span><br>
            <label>姓名</label><input type="text" name="name" placeholder="请输入中文姓名"><span id="nameMsg"></span><br>
            <label>密码</label><input type="password" name="pwd" placeholder="请输入密码"><span id="pwdMsg"></span><br>
            <label>确认密码</label><input type="password" name="repwd" placeholder="请输入确认密码"><span id="repwdMsg"></span><br>
            <label>电话</label><input type="number" name="phone" placeholder="请输入手机号码"><span id="phoneMsg"></span><br>
            <label>邮箱地址</label><input type="email" name="email" placeholder="请输入电子邮箱地址"><span id="emailMsg"></span><br>
            <label>生日</label><input type="date" name="birthday" placeholder="请输入生日"><span id="birthdayMsg"></span><br>
            <label>学历</label><select name="edu">
                    <option>初中</option>
                    <option>高中</option>
                    <option>大专</option>
                    <option>本科</option>
                    <option>硕士</option>
                    <option>博士</option>
                </select><br>
            <label>性别</label>
                <input name="gender" type="radio" value="1">男
                <input name="gender" type="radio" value="0">女<br>
            <label>爱好</label>
                <input name="likes" type="checkbox" value="读书">读书
                <input name="likes" type="checkbox" value="篮球">篮球
                <input name="likes" type="checkbox" value="手游">手游
                <input name="likes" type="checkbox" value="唱歌">唱歌
                <input name="likes" type="checkbox" value="跳舞">跳舞<br>
            <label>头像</label>
                <img src="https://img1.baidu.com/it/u=3444582179,3026998610&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400" height="100px">
                <input onchange="upload()" type="file" name="head" style="vertical-align: bottom"><br>
            <label>自我介绍</label>
                <textarea name="iam" style="height: 70px; margin: 10px 0px; text-align: left"></textarea><br>
            <div style="width: 300px; text-align: right">
                <button type="reset">重置</button>
                <button>注册</button>
            </div>
        </div>
    </form>
</fieldset>

</body>
</html>

<!--
用户表(MySQL)
CREATE TABLE `user` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `account` varchar(50) DEFAULT NULL,
  `name` varchar(50) DEFAULT NULL,
  `pwd` varchar(64) DEFAULT NULL,
  `email` varchar(100) DEFAULT NULL,
  `phone` varchar(50) DEFAULT NULL,
  `birthday` date DEFAULT NULL,
  `edu` varchar(20) DEFAULT NULL,
  `gender` tinyint(1) DEFAULT NULL COMMENT '1 男, 0 女',
  `likes` varchar(100) DEFAULT NULL,
  `head` varchar(200) DEFAULT NULL,
  `iam` varchar(500) DEFAULT NULL,
  `regtime` timestamp NULL DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
)
-->















<style>
    * {
        vertical-align: middle;
    }

    fieldset {
        width: 80%;
        margin: 40px auto;
    }

    div {
        line-height: 50px;
    }

    span {
        display: inline-block;
        width: 200px;
        background-color: #eee;
        line-height: 30px;
        vertical-align: middle;
    }

    input[type=text], input[type=number], input[type=password], input[type=email], input[type=date], select, span, select, textarea {
        width: 200px;
        height: 30px;
        text-align: center;
        box-sizing: border-box;
    }

    label {
        min-width: 100px;
        display: inline-block;
        text-align: right;
        padding: 0px 5px;
        box-sizing: border-box;
    }

    label::after {
        content: ":";
    }

    input + span, select + span {
        background-color: transparent;
        display: inline;
        color: red
    }

    legend{
        background-color: #ddd;
        padding: 5px 10px;
        border-radius: 5px;
        font-weight: bold;
        color: #555;
    }

</style>